/**
 * 商业价值与盈利模式组件
 * 展示市场规模、投资回报分析、盈利模式设计等内容
 */

import { motion } from "framer-motion";
import {
    AreaChart,
    Area,
    BarChart,
    Bar,
    PieChart,
    Pie,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Cell,
    ResponsiveContainer
} from "recharts";
import { COLORS, profitData, teamCompositionData } from "../../data/homeData";

interface BusinessSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function BusinessSection({ sectionRef }: BusinessSectionProps) {
    // 市场规模数据
    const marketSizeData = [
        { year: "2022", value: 1.05 },
        { year: "2024", value: 1.5 },
        { year: "2026", value: 2.3 },
        { year: "2028", value: 3.2 },
        { year: "2030", value: 4.12 }
    ];

    // 投资回报数据
    const roiData = [
        { name: "传统解析方案", roi: 40 },
        { name: "AI解析方案", roi: 320 }
    ];

    return (
        <section
            ref={sectionRef}
            className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">商业价值与盈利模式</h2>
                </motion.div>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {/* 市场规模与增长 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            y: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            y: 0
                        }}
                        transition={{
                            duration: 0.5
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                        <h3 className="text-xl font-semibold text-indigo-800 mb-6">市场规模与增长</h3>
                        
                        {/* 市场规模图表 */}
                        <div className="h-60 mb-6">
                            <ResponsiveContainer width="100%" height="100%">
                                <AreaChart data={marketSizeData}>
                                    <defs>
                                        <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor="#4F46E5" stopOpacity={0.8} />
                                            <stop offset="95%" stopColor="#4F46E5" stopOpacity={0} />
                                        </linearGradient>
                                    </defs>
                                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                    <XAxis dataKey="year" stroke="#64748b" />
                                    <YAxis stroke="#64748b" />
                                    <Tooltip
                                        formatter={(value: any) => [`${value} 亿美元`, "市场规模"]}
                                        contentStyle={{
                                            backgroundColor: "white",
                                            border: "none",
                                            borderRadius: "10px",
                                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                        }} />
                                    <Area
                                        type="monotone"
                                        dataKey="value"
                                        stroke="#4F46E5"
                                        fillOpacity={1}
                                        fill="url(#colorValue)" />
                                </AreaChart>
                            </ResponsiveContainer>
                        </div>
                        
                        {/* 关键指标 */}
                        <div className="space-y-4 mt-auto">
                            <div className="bg-indigo-50 p-4 rounded-xl">
                                <p className="text-sm text-indigo-600 font-medium">全球AI招聘市场规模</p>
                                <p className="text-2xl font-bold text-indigo-800">4.12亿美元</p>
                                <p className="text-xs text-indigo-500">预计2030年达到</p>
                            </div>
                            <div className="bg-purple-50 p-4 rounded-xl">
                                <p className="text-sm text-purple-600 font-medium">年复合增长率</p>
                                <p className="text-2xl font-bold text-purple-800">18.7%</p>
                                <p className="text-xs text-purple-500">2024-2030年</p>
                            </div>
                        </div>
                    </motion.div>
                    
                    {/* 投资回报分析 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            y: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            y: 0
                        }}
                        transition={{
                            duration: 0.5,
                            delay: 0.2
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                        <h3 className="text-xl font-semibold text-indigo-800 mb-6">投资回报分析</h3>
                        
                        {/* ROI计算公式 */}
                        <div className="bg-indigo-50 p-5 rounded-xl mb-6">
                            <p className="text-sm text-indigo-600 font-medium">ROI计算公式</p>
                            <p className="text-xl font-bold text-indigo-800 mt-2">ROI = (总收益 - 总成本) ÷ 总成本 × 100%</p>
                        </div>
                        
                        {/* ROI对比图表 */}
                        <div className="h-52 mb-6">
                            <ResponsiveContainer width="100%" height="100%">
                                <BarChart data={roiData}>
                                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                    <XAxis dataKey="name" stroke="#64748b" />
                                    <YAxis stroke="#64748b" />
                                    <Tooltip
                                        formatter={(value: any) => [`${value}%`, "投资回报率"]}
                                        contentStyle={{
                                            backgroundColor: "white",
                                            border: "none",
                                            borderRadius: "10px",
                                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                        }} />
                                    <Bar dataKey="roi" radius={[4, 4, 0, 0]}>
                                        <Cell fill="#4F46E5" />
                                        <Cell fill="#8B5CF6" />
                                    </Bar>
                                </BarChart>
                            </ResponsiveContainer>
                        </div>
                        
                        {/* 关键指标 */}
                        <div className="grid grid-cols-2 gap-4 mt-auto">
                            <div className="bg-indigo-50 p-3 rounded-lg">
                                <p className="text-xs text-indigo-600 font-medium">招聘成本降低</p>
                                <p className="text-xl font-bold text-indigo-800">70%</p>
                            </div>
                            <div className="bg-purple-50 p-3 rounded-lg">
                                <p className="text-xs text-purple-600 font-medium">招聘周期缩短</p>
                                <p className="text-xl font-bold text-purple-800">85%</p>
                            </div>
                            <div className="bg-indigo-50 p-3 rounded-lg">
                                <p className="text-xs text-indigo-600 font-medium">人效提升</p>
                                <p className="text-xl font-bold text-indigo-800">240%</p>
                            </div>
                            <div className="bg-purple-50 p-3 rounded-lg">
                                <p className="text-xs text-purple-600 font-medium">投资回报周期</p>
                                <p className="text-xl font-bold text-purple-800">6个月</p>
                            </div>
                        </div>
                    </motion.div>
                    
                    {/* 盈利模式设计 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            y: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            y: 0
                        }}
                        transition={{
                            duration: 0.5,
                            delay: 0.4
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                        <h3 className="text-xl font-semibold text-indigo-800 mb-6">盈利模式设计</h3>
                        
                        {/* 盈利模式图表 */}
                        <div className="h-72 mb-6">
                            <ResponsiveContainer width="100%" height="100%">
                                <PieChart style={{ padding: "4px" }}>
                                    <Pie
                                        data={profitData}
                                        cx="50%"
                                        cy="50%"
                                        labelLine={true}
                                        outerRadius={80}
                                        fill="#8884d8"
                                        dataKey="value"
                                        label={({ name, percent }: { name: string; percent: number }) => `${name} ${(percent * 100).toFixed(0)}%`}>
                                        {profitData.map((entry: any, index: number) => (
                                            <Cell
                                                key={`cell-${index}`}
                                                fill={COLORS.chartColors[index % COLORS.chartColors.length]} />
                                        ))}
                                    </Pie>
                                    <Tooltip
                                        formatter={(value: any) => [`${value}%`, "占比"]}
                                        contentStyle={{
                                            backgroundColor: "white",
                                            border: "none",
                                            borderRadius: "10px",
                                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                        }} />
                                </PieChart>
                            </ResponsiveContainer>
                        </div>
                        
                        {/* 盈利模式详情 */}
                        <div className="space-y-3 mt-auto">
                            <div className="bg-indigo-50 p-3 rounded-lg flex items-center">
                                <div className="bg-indigo-600 p-2 rounded-full mr-3">
                                    <i className="fa-solid fa-cloud text-white text-sm"></i>
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-indigo-800">SaaS订阅模式</p>
                                    <p className="text-xs text-indigo-600">按用户数量、功能模块和使用期限收费</p>
                                </div>
                            </div>
                            <div className="bg-purple-50 p-3 rounded-lg flex items-center">
                                <div className="bg-purple-600 p-2 rounded-full mr-3">
                                    <i className="fa-solid fa-chart-line text-white text-sm"></i>
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-purple-800">按量计费模式</p>
                                    <p className="text-xs text-purple-600">基于简历处理量和API调用次数收费</p>
                                </div>
                            </div>
                            <div className="bg-indigo-50 p-3 rounded-lg flex items-center">
                                <div className="bg-indigo-600 p-2 rounded-full mr-3">
                                    <i className="fa-solid fa-handshake text-white text-sm"></i>
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-indigo-800">增值服务模式</p>
                                    <p className="text-xs text-indigo-600">提供定制化开发、数据分析和咨询服务</p>
                                </div>
                            </div>
                            <div className="bg-purple-50 p-3 rounded-lg flex items-center">
                                <div className="bg-purple-600 p-2 rounded-full mr-3">
                                    <i className="fa-solid fa-code-branch text-white text-sm"></i>
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-purple-800">合作伙伴模式</p>
                                    <p className="text-xs text-purple-600">与招聘平台和HR系统集成，分成收益</p>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}